<template>
  <div style="width: 100%; height: 100%; position: relative">
    <Wsmodel3d
      style="
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 1;
      "
    />
    <div class="greenhouse">
      <div class="row1">
        <div class="row1-left">
          <WCard>
            <Module3 :data="moduleData1" />
          </WCard>
          <WCard>
            <Module4 :data="moduleData2" />
          </WCard>
        </div>
        <div>
          <!-- <Wsmodel3d /> -->
        </div>
        <div class="row1-right">
          <WCard>
            <CqjcModule :data="moduleData3" />
          </WCard>
          <WCard>
            <Module5 :data="moduleData4" />
          </WCard>
        </div>
      </div>
      <div class="row2">
        <WCard class="m2">
          <Wmodule title="土壤监测设备" class="tur-module">
            <ClChartBar :data="moduleData6" />
          </Wmodule>
        </WCard>
        <WCard class="m2">
          <Module6 :data="moduleData7" />
        </WCard>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
import WCard from '@/components/wcard/index.vue'
import Wmodule from '@/components/wmodule/index.vue'
import ClChartBar from './clChartbar.vue'
import CqjcModule from '../equipment/component/module4.vue'
import Module2 from './module2.vue'
import Module3 from './module3.vue'
import Module4 from './module4.vue'
import Module5 from './module5.vue'
import Module6 from './module6.vue'
import Wsmodel3d from './wsmodel3d.vue'
import { getHouseDeviceList, getHouseDetail, getUserDeviceByType } from '@/api'

const route = useRoute()

const moduleData1 = ref([])
const moduleData2 = ref([])
const moduleData3 = ref([])
const moduleData4 = ref({})
const moduleData5 = ref([])
const moduleData7 = ref([])

const moduleData6 = ref({
  xAxisData: [],
  series: []
})

onMounted(() => {
  const { id } = route.query
  if (id) {
    getHouseDeviceList({
      id
    }).then((res) => {
      if (res.code === 200) {
        const {
          metMappingVos = [],
          soilMappingVos = [],
          wormDevices = [],
          yieldMap = {},
          sporeStatusVos = []
        } = res.data
        moduleData1.value = metMappingVos || []
        moduleData2.value = soilMappingVos || []
        moduleData3.value = wormDevices[0].wornData || []

        moduleData4.value = yieldMap || {}
        moduleData7.value = sporeStatusVos
      }
    })
    getHouseDetail({
      id
    }).then((res) => {
      if (res.code === 200) {
        const { carouselPicList = [] } = res.data
        console.log('carouselPicList===', carouselPicList)
        moduleData5.value = carouselPicList || []
      }
    })
  }
  getUserDeviceByType({
    greenHouseId: id
  }).then((res) => {
    console.log('reskkk', res)
    if (res.code === 200) {
      let _series = []
      let _xAxis = {}
      const _data = res.data || []
      for (let i = 0; i < _data.length; i++) {
        let obj = {
          name: _data[i].deviceName,
          data: []
        }
        const rows = _data[i].rows || []
        for (let j = 0; j < rows.length; j++) {
          obj.data.push(rows[j].temValue)
          _xAxis[rows[j].recordTimeStr] = 1
        }
        _series.push(obj)
      }
      let _xAxisData = Object.keys(_xAxis)
      _xAxisData.sort((a, b) => {
        return dayjs(a).valueOf() - dayjs(b).valueOf()
      })
      console.log('_series', _series)
      moduleData6.value = {
        xAxisData: _xAxisData,
        series: _series
      }
    }
  })
})
</script>
<style lang="scss" scoped>
.greenhouse {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 250px;
  grid-gap: 16px;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  .row1 {
    display: grid;
    grid-template-columns: 470px 1fr 480px;
    .row1-left {
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      gap: 14px;
    }
    .row1-right {
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      gap: 14px;
    }
  }
  .row2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 22px;
    .tur-module {
      height: 100%;
      .cl-chart {
        height: 100%;
      }
    }
  }
  .m2 {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    pointer-events: all;
    :deep(.module1-content) {
      height: 100%;
      padding: 0px;
    }
  }
}
</style>
